<template>
    <div ref="hello">这是组件E</div>

    <p>{{ name }}</p>
    <button @click="name='李四'">修改name</button>
    <hr>

    <p>{{ counter.count }}</p>
    <p>{{ counter.doubleCount }}</p>
    <button @click="counter.increment">修改count</button>
</template>

<script setup>
import { onMounted, onUpdated, ref } from 'vue';
import { useCounterStore } from '../stores/counter.js'

const counter = useCounterStore()




const name = ref('张三')


const hello = ref(null)

onMounted(() => {
    console.log('mounted......')

    console.log(hello.value)
})

onUpdated(() => {
    console.log('updated......')
})

console.log('created......')


</script>

<style scoped>

</style>